<template>
  <el-dialog
    v-model="visible"
    title="审核"
    width="600"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <template #default>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="80"
        label-position="top"
      >
        <el-form-item label="审核">
          <el-radio-group v-model="form.review_opinion">
            <el-radio :label="true">审核通过</el-radio>
            <el-radio :label="false">审核未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.specification.length">
          <div class="mb-5">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="多属性商品审核时，需确认是否需要对应属性"
              placement="top"
            >
              <div class="flex justify-start items-center text-gray-800 text-sm">
                多属性确认
                <svg-icon class="ml-1 text-gray-400" icon-class="hint_line" /><span
                  class="text-gray-400"
                  >多属性商品审核时，需确认是否需要对应属性</span
                >
              </div>
            </el-tooltip>
          </div>
          <template v-for="item in form.specification" :key="item.label">
            <el-form-item :label="`${item.label}:`" label-position="left">
              <el-checkbox-group v-model="item.value">
                <el-checkbox v-for="o in item.valueOptions" :label="o" :key="o">{{
                  o
                }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </template>
        </div>

        <el-form-item label="审核备注">
          <el-input
            v-model="form.review_remark"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 10 }"
            type="textarea"
          />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save(formRef)"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup name="AuditModal">
import api from "../api";
import { reactive, toRefs, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["query"]);
const data = reactive({
  form: {},
  visible: false,
  loading: false,
  formRef: null,
  options: [],
  rules: {
    name: [{ required: true, message: "请输入属性名" }],
  },
});
const { rules, form, visible, loading, formRef, options } = toRefs(data);
const open = (data) => {
  if (data) {
    form.value = data;
    if (form.value.specification?.length) {
      form.value.specification = form.value.specification.map((i) => {
        i.valueOptions = i.value;
        return i;
      });
    }
  }
  visible.value = true;
};

const save = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (!form.value.review_opinion && !form.value.review_remark) {
      ElMessage.error("请填写审核备注");
      return;
    }
    const specification = form.value.specification.map((i) => {
      delete i.valueOptions;
      return i;
    });

    if (valid) {
      loading.value = true;
      api
        .review({
          product_ids: form.value.product_ids,
          review_opinion: form.value.review_opinion,
          review_remark: form.value.review_remark,
          specification: specification,
        })
        .then((res) => {
          ElMessage.success(res.message);
          emits("query");
          close();
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};
const close = () => {
  proxy.resetForm("formRef");
  form.value.is_custom_notice = "";
  form.value.manage_user_id = "";
  visible.value = false;
};
defineExpose({ open });
</script>
